<template>
	<view class="content1">
		<view class="fxnr" v-show="getEnd()">
			<view class="ycy">
				<view class="renshu">
					已参与
					<text>{{imglist.totalNumber}}人</text>
				</view>
				<view class="imglist">
					<image v-for="(el,ind) in imglist.data" :src="el.userImg" mode="aspectFill" class="userImg" :style="{'z-index':imglist.data.length-ind,'margin-right': '-16rpx'}"></image>
					<image :src="getImg('bh-ms-jl-icon-ren.png')" mode="aspectFill"></image>
				</view>
				<!-- <view class="yaoqin">
					邀请好友一起抢
				</view> -->
			</view>
			<view class="fenxian">
				<image class="icon" :src="getImg('bh-ms-jl-logo.png')" mode="aspectFill"></image>
				<view class="biaoyu">
					<text>自己购买能省钱</text>
					<text>分享推荐能赚钱</text>
				</view>
				<view class="">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var web = require('../../components/utils/request.js');
	export default{
		props:['tjinfo'],
		data(){
			return{
				data:{},
				imglist:[]
			}
		},
		mounted() {
			this.data=this.tjinfo;
			this.initPage();
			var that=this;
			var name='fenxiang'+this.data.orderType
			uni.$on(name,function(data){
				if(data.is){
					setTimeout(function(){
						that.initPage()
					},1000)
				}
			})
		},
		methods:{
			getEnd(){//获取全局控制显示
				return this.$allend
			},
			initPage: async function () {//异步转同步
			    await this.getList();   // 关键点执行完成后继续下一步
				this.$isallend(true);//全局控制显示
				this.$forceUpdate();//刷新页面重新获取全局变量控制显示隐藏
			},
			getList(){
				return new Promise((resolve, reject)=>{
					var url='/app/share_record.jspx';
					var arg = this.data;
					arg.pageNo=1;
					arg.pageSize=10;
					var that = this;
					web.httpPost(that, url, arg, function(res) {
						if (200 == res.data.status) {
							that.imglist=res.data
							resolve();
						}
					})
				})
			},
			getImg(url){
				return 'https://hshd.tour-ma.com/r/cms/www/weifang/ximg/'+url
			}
		}
	}
</script>

<style lang="scss">
	.fenxian{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 148rpx;
		.biaoyu{
			width: 203rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: bold;
			color: #FFC84F;
			display: flex;flex-direction: column;
			justify-content: space-between;
			margin-left: 40rpx;
		}
		.icon{
			width: 117rpx;
			height: 98rpx;
		}
	}
	.ycy{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 169rpx;
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		.renshu{
			display: flex;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000000;
			flex-direction: column;
		}
		.yaoqin{
			width: 200rpx;
			height: 57rpx;
			background: #FED849;
			border-radius: 28rpx;
			text-align: center;
			line-height: 57rpx;
			font-size: 21rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #4C3200;
		}
		.imglist{
			margin-left: 55rpx;
			display: flex;
			flex-direction: row;align-items: center;
			.userImg{
				border: 4rpx solid #fff;
				background:rgba(240,240,240,1);
			}
			image{
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
	.fxnr{
		width: 700rpx;
	}
	.content1{
		width: 750rpx;
		height: 319rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
</style>
